<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <link rel="stylesheet" href="/css/Accountmana.css">
    <script src="/js/axios.min.js" type="text/javascript"></script>
    <script src="/js/jquery.js"></script>
    <script src="/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div class="mi-header">
            <div class="mi-title">
                <div class="mi-logo">
                    <img src="/img/Login/Login.jpg" width="60px" height="60px" />
                </div>
                小米账号
            </div>
            <div class="mi-nav">
                <a class="mi-nav__item url">用户协议</a>
                <a class="mi-nav__item url">隐私政策</a>
                <a class="mi-nav__item url">帮助中心</a>
            </div>
        </div>
            <div id="bby">
                <div id="menu">
                    <div id="pricture-head" v-for="u in UserAllList">
                        <img id="headimg":src="u.userPicture">
                        <p id="account-name">{{u.userName}}</p>
                        <p id="account-phone">+86 {{u.userPhone}}</p>
                    </div>
                    <div>
                        <ul>
                            <li class="menu-li" id="li-loginli" style="border-left: 7px solid #FF5C00;background-color:#FFF3E6"><a id="logintest">登录与安全</a></li>
                            <li class="menu-li" id="li-personalli"><a id="pelsontest">个人信息</a></li>
                        </ul>
                    </div>
                </div>
                <!-- 登录方式 -->
                <div id="login"style="display: block;" v-for="u in UserAllList">
                    <ul id="login-title">
                        <li id="modetext">登录方式</li>
                        <div id="phonediv">
                            <img id="phoneimg" src="/img/Accountmanma/手机.png" >
                            <a id="phonetext">安全手机</a>
                            <a id="phonenum">+86 {{u.userPhone}}</a>
                            <a id="symbol">></a>
                        </div>
                        <div id="passworddiv">
                            <img id="passwordimg" src="/img/Accountmanma/密码.png" >
                            <a id="passwordtext">修改密码</a>
                            <a id="password">未设置</a>
                            <a id="symbol">></a>
                        </div>
                    </ul>
                </div>
                <!-- 个人信息 -->
                <div id="personal" style="display: none;" v-for="u in UserAllList">
                    <ul id="personal-title">
                        <li id="informationtext">个人信息</li>
                        <ul id="personal-menu">
                            <li>
                                <p id="PMenuLi">头像</p>
                                <p id="MenuImg">
                                    <img id="PMenuImg" :src="u.userPicture" >
                                </p>
                            </li>
                            <li>
                                <p id="PMenuLi">昵称</p>
                                <p id="PMenuText">{{u.userName}}</p>
                            </li>
                            <li>
                                <p id="PMenuLi">性别</p>
                                <p id="PSex">{{u.userGender}}</p>
                            </li>
                            <li>
                                <p id="PMenuLi">小米ID</p>
                                <p id="PMID">{{u.userAccount}}</p>
                            </li>
                            <li>
                                <p id="PMenuLi">国家/地区</p>
                                <p id="PCount">{{u.userLocation}}</p>
                            </li>
                        </ul>
                    </ul>
                    <input type="button" id="PEdit" value="编辑" onclick="PEdit()" />
                </div>
            </div>
        </div>
        <script src="/js/userscommon.js"></script>
        <script>
            let vm = new Vue({
                el:"#app",  
                data:{
                    UserAllList: [],
                    account: '',
                },
                created: function () {
                    // 获取跳转页面的url数据
                    //首页传送的指定商品id从而获取对应商品信息
                    var url = window.location.href
                    var path = url.split('?')[1]
                    var field = new URLSearchParams('?'+path)
                    var account = field.get('account')
                    var account = 1687331537
                    this.account= account
                    this.UserAll(account)
                },
                methods: {
                    UserAll: function(account){
                        axios.get('/user/getAllAccount',{ params: { account : account} }).then(function (resp) {
                            vm.UserAllList = resp.data.data
                        })
                    },
                },
            });
        </script>
        <script src="/js/Accountmana.js"></script>
</body>
</html> 